import QtQuick 2.6
import Sailfish.Silica 1.0

Column{
    id: tabPageHeader
    property real dp: Screen.widthRatio
    property TabView listView: null
    property variant textArray: []
    property bool indicatorOnTop: true
    topPadding: 10*dp
    bottomPadding: 10*dp


    //tab标题
    Row {
        height: tabHeadText.contentHeight

        Repeater {
            id: sectionRepeater
            model: textArray.length

            delegate: BackgroundItem {
                width: tabHeadText.contentWidth+10*dp
                height: tabHeadText.contentHeight


                Text {
                    id: tabHeadText
                    anchors.fill: parent
                    horizontalAlignment: Text.AlignHCenter
                    font.pointSize: 20*dp
                    color: (listView.currentIndex
                            === model.index) ? "#ea562e" : Theme.secondaryColor

                    text: (textArray.length >= index) ? textArray[index] : ""

                    anchors.horizontalCenter: parent.horizontalCenter

                }

                onClicked: listView.currentIndex = index
            }


        }

    }

    //分割横线
    Rectangle{
        color: "#4DA4A4A4"
        width: parent.width
        height: 1
    }
}
//    Rectangle {
//        id: currentSectionIndicator
//        color: "#ea562e"
//        height: Theme.paddingSmall
//        width: tabPageHeader.width / sectionRepeater.count
//        x: listView.currentIndex * width

//        Behavior on x {
//            NumberAnimation {
//                duration: 200
//            }
//        }
//    }


//    SilicaFlickable {
//        id: flickable
//        interactive: true
//        anchors.fill: parent
//        contentHeight: parent.height
//        height: parent.height
//        Row {
//            height: parent.height
//            anchors {
//                top: indicatorOnTop ? currentSectionIndicator.bottom : parent.top
//                bottom: indicatorOnTop ? parent.bottom : currentSectionIndicator.top
//                left: parent.left
//                right: parent.right
//            }

//            Repeater {
//                id: sectionRepeater
//                model: textArray.length

//                delegate: BackgroundItem {
//                    width: tabPageHeader.width / sectionRepeater.count
//                    height: tabHeadText.contentHeight

//                    Text {
//                        id: tabHeadText
//                        anchors.fill: parent
//                        horizontalAlignment: Text.AlignHCenter
//                        font.pointSize: 20*dp
//                        color: (listView.currentIndex
//                                === model.index) ? "#ea562e" : Theme.secondaryColor

//                        text: (textArray.length >= index) ? textArray[index] : ""

//                        Component.onCompleted: {
//                            console.log("这是高度："+tabHeadText.contentHeight)
//                        }

//                    }

//                    onClicked: listView.currentIndex = index
//                }


//            }

//        }
//        Rectangle {
//            id: currentSectionIndicator

//            anchors.top: indicatorOnTop ? parent.top : undefined
//            anchors.bottom: indicatorOnTop ? undefined : parent.bottom
//            color: "#ea562e"
//            height: Theme.paddingSmall
//            width: tabPageHeader.width / sectionRepeater.count
//            x: listView.currentIndex * width

//            Behavior on x {
//                NumberAnimation {
//                    duration: 200
//                }
//            }
//        }
//    }

